CRUD Operation Using Modal Dialog in ASP.NET MVC

In this article I am going to explain how to complete add, update, delete and find OR CRUD (Create, Retrieve, Update, Delete) Operation using razor view engine in ASP.NET MVC3 or above version.

Here into this example, I will use modal dialog by using JavaScript to add, edit, delete and find operation.

Please follow the steps given below to create an application that allows the user to add, edit, delete and find records of the student.

Open Microsoft Visual Studio 2010 � Select New Project � Select Web from the Installed Templates à Select ASP.NET MVC3 or

MVC4 Web Application à Enter the project name Modal_CRUD_MVC in the Name textbox à Click OK.

After selecting the project you can see the following dialog box:

Select Empty from the Select a template option à Select Razor view engine à Click OK.

Add the following Modal classes (Student and StudentContext) in your Model folder:

Student class represents the table structure in the database and StudentContext Students' property represents the name of the table and data of the students in the database.

    public class Student

    {

        public int StudentID {  get;  set; }

        public string Name { get; set; }

        public string Age { get; set; }

        public string State { get; set; }

        public string Country { get; set; }

    }

    public class StudentContext : DbContext

    {

        public DbSet<Student> Students

        {

            get;

            set;

        }

    }

Also include Entity framework reference in your project because in this application we are going to use entity framework code first model to add, edit, delete and find records from the database.

To include entity framework dll, follow these steps:

Go to Project à Manage NuGet Packages à Enter entity framework in the search textbox and search online.

You will find the latest version of the Entity framework version.

You also have to configure your web.config file for the implementation of this project. Add the connectionStrings element under the configuration tag:

  <connectionStrings>

    <add name="StudentContext"connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=StudentDb;Integrated Security=true;"providerName="System.Data.SqlClient" />

  </connectionStrings>

Add a Controller in your project and edit the controller name as HomeController as shown in the figure below:

After adding HomeController, add an Index view into your project:

Edit the Index view and add the following code as given below. Also, include these

files (jquery-ui.min.css, jquery-1.7.1.min.js, jquery-UI-1.8.20.min.js) in your project.

@model IEnumerable<Modal_CRUD_MVC.Models.Student>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({ cache: false });
            $("#openDialog").live("click", function (e) {
                e.preventDefault();
                var url = $(this).attr('href');
                $("#dialog-edit").dialog({
                    title: 'Add Student',
                    autoOpen: false,
                    resizable: false,
                    height: 355,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-edit").dialog('open');
                return false;
            });
            $(".editDialog").live("click", function (e) {
                var url = $(this).attr('href');
                $("#dialog-edit").dialog({
                    title: 'Edit Customer',
                    autoOpen: false,
                    resizable: false,
                    height: 355,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-edit").dialog('open');
                return false;
            });
            $(".confirmDialog").live("click", function (e) {
                var url = $(this).attr('href');
                $("#dialog-confirm").dialog({
                    autoOpen: false,
                    resizable: false,
                    height: 170,
                    width: 350,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    buttons: {
                        "OK": function () {
                            $(this).dialog("close");
                            window.location = url;
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-confirm").dialog('open');
                return false;
            });
            $(".viewDialog").live("click", function (e) {
                var url = $(this).attr('href');
                $("#dialog-view").dialog({
                    title: 'View Customer',
                    autoOpen: false,
                    resizable: false,
                    height: 355,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    buttons: {
                        "Close": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-view").dialog('open');
                return false;
            });
            $("#btncancel").live("click", function (e) {
                $("#dialog-edit").dialog('close');
            });
        });  
    </script>
</head>
<body>
    <table align="center" width="800px">
        <tr>
            <td>
                @Html.ActionLink("Create New", "AddEditRecord", "Home", null, new { @id = "openDialog" })
            </td>
        </tr>
    </table>
    <table cellpadding="10" style="border: 1px solid black; font-family: Verdana;" align="center"
        width="800px">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Age)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.State)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Country)
            </th>
            <th>
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.State)
                </td>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.Country)
                </td>
                <td>
                    @Html.ActionLink("Edit", "AddEditRecord", new { id = item.StudentID }, new { @class = "editDialog" })|
                    @Html.ActionLink("Details", "Details", new { id = item.StudentID }, new { @class = "viewDialog" }) |
                    @Html.ActionLink("Delete", "DeleteRecord", new { id = item.StudentID }, new { @class = "confirmDialog" })
                </td>
            </tr>
        }
    </table>
    <div id="dialog-confirm" style="display: none">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            Are you sure to delete ?
        </p>
    </div>
    <div id="dialog-edit" style="display: none">
    </div>
    <div id="dialog-view" style="display: none">
    </div>
</body>
</html>

I have put all the code necessary to perform add, edit, delete and find records of the students in the Index view.

In this project, we do not have any Layout or Master page.

After including files in the project, your solution explorer might something look like this:

Add a partial view _StudentData in Views à Home folder.

Edit the _StudentData partial view as below:

@model Modal_CRUD_MVC.Models.Student

@using (Ajax.BeginForm("AddEditRecord", "Home", new AjaxOptions{ HttpMethod = "POST", UpdateTargetId = "studentDialog" }))

{

    @Html.ValidationSummary(true)

 

    <fieldset>

        <legend>Student</legend>

        @if (ViewBag.IsUpdate == true)

        {

            @Html.HiddenFor(model => model.StudentID)

        }

        <div class="editor-label">

            @Html.LabelFor(model => model.Name)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Name)

            @Html.ValidationMessageFor(model => model.Name)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Age)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Age)

            @Html.ValidationMessageFor(model => model.Age)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.State)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.State)

            @Html.ValidationMessageFor(model => model.State)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Country)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Country)

            @Html.ValidationMessageFor(model => model.Country)

        </div>

        <p>

            @if (ViewBag.IsUpdate == true)

            {

                <input type="submit" value="Update" id="btnUpdate" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />

            }

            else

            {

                <input type="submit" value="Save" id="btnSave" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />

            }

            <input type="button" value="Cancel" id="btncancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />

        </p>

    </fieldset>

}

Also, add the StudentData view in the same folder Views à Home. This view will response by the controller to the browser if the JavaScript is turned off otherwise the above partial view will display in a modal dialog to the user.

@model Modal_CRUD_MVC.Models.Student

@using (Html.BeginForm("AddEditRecord", "Home"))

{

    @Html.ValidationSummary(true)

 

    <fieldset>

        <legend>Student</legend>

        @if (ViewBag.IsUpdate == true)

        {

            @Html.HiddenFor(model => model.StudentID)

        }

        <div class="editor-label">

            @Html.LabelFor(model => model.Name)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Name)

            @Html.ValidationMessageFor(model => model.Name)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Age)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Age)

            @Html.ValidationMessageFor(model => model.Age)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.State)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.State)

            @Html.ValidationMessageFor(model => model.State)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Country)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Country)

            @Html.ValidationMessageFor(model => model.Country)

        </div>

        <p>

            @if (ViewBag.IsUpdate == true)

            {

                <input type="submit" value="Update" id="btnUpdate" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />

            }

            else

            {

                <input type="submit" value="Save" id="btnSave" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />

            }

            @Html.ActionLink("Back to List", "Index")

        </p>

    </fieldset>

}

Add a partial view _StudentDetails in Views à Home folder.

Edit the _StudentDetails partial view as below:

@model Modal_CRUD_MVC.Models.Student

 

<fieldset>

    <legend>Student</legend>

 

    <div class="display-label">

         @Html.DisplayNameFor(model => model.Name)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.Name)

    </div>

 

    <div class="display-label">

         @Html.DisplayNameFor(model => model.Age)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.Age)

    </div>

 

    <div class="display-label">

         @Html.DisplayNameFor(model => model.State)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.State)

    </div>

 

    <div class="display-label">

         @Html.DisplayNameFor(model => model.Country)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.Country)

    </div>

</fieldset>

Add and Edit StudentDetails in Views => Home folder.

The purpose of adding the StudentDetails view is the same as I have explained above for the StudentData view.

@model Modal_CRUD_MVC.Models.Student

 

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>StudentDetails</title>

</head>

<body>

    <fieldset>

        <legend>Student</legend>

   

        <div class="display-label">

             @Html.DisplayNameFor(model => model.Name)

        </div>

        <div class="display-field">

            @Html.DisplayFor(model => model.Name)

        </div>

   

        <div class="display-label">

             @Html.DisplayNameFor(model => model.Age)

        </div>

        <div class="display-field">

            @Html.DisplayFor(model => model.Age)

        </div>

   

        <div class="display-label">

             @Html.DisplayNameFor(model => model.State)

        </div>

        <div class="display-field">

            @Html.DisplayFor(model => model.State)

        </div>

   

        <div class="display-label">

             @Html.DisplayNameFor(model => model.Country)

        </div>

        <div class="display-field">

            @Html.DisplayFor(model => model.Country)

        </div>

    </fieldset>

    <p>

        @Html.ActionLink("Edit", "Edit", new { id = Model.StudentID }, new { @class = "editDialog" }) |

        @Html.ActionLink("Back to List", "Index")

    </p>

</body>

</html>

I have finished the Model and View portion. Now I am going to explain the HomeController and its Action methods which are necessary in order to run our application.

Index action returns a View along with the list of students:

    public class HomeController : Controller

    {

        StudentContext db = new StudentContext();

 

        public ActionResult Index()

        {

            return View(db.Students.ToList());

        }

    }

Add the AddEditRecord action with the parameter (id) which can be either null or not null. If the id parameter is null it will return empty _StudentData or StudentData, partial view or View respectively otherwise it will find the record of the student on the basis of id and passes the student model to the view in order to update the student details.

Here I am also creating a dynamic property ViewBag. IsUpdate to change the button type in view. If the IsUpdate is true it will set button text as Update and if IsUpdate is false then it will be set as Save.

 [HttpGet]

        public ActionResult AddEditRecord(int? id)

        {

            if (Request.IsAjaxRequest())

            {

                if (id != null)

                {

                    ViewBag.IsUpdate = true;

                    Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();

                    return PartialView("_StudentData", student);

                }

                ViewBag.IsUpdate = false;

                return PartialView("_StudentData");

            }

            else

            {

                if (id != null)

                {

                    ViewBag.IsUpdate = true;

                    Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();

                    return PartialView("StudentData", student);

                }

                ViewBag.IsUpdate = false;

                return View("StudentData");

            }

        }

Add the AddEditRecord action which is of HttpPost type to add or update student records. If the cmd contains Save it will add the record of the student in the database otherwise update the data of students in the database.

[HttpPost]

        public ActionResult AddEditRecord(Student student, string cmd)

        {

            if (ModelState.IsValid)

            {

                if (cmd == "Save")

                {

                    try

                    {

                        db.Students.Add(student);

                        db.SaveChanges();

                        return RedirectToAction("Index");

                    }

                    catch { }

                }

                else

                {

                    try

                    {

                        Student stud = db.Students.Where(m => m.StudentID == student.StudentID).FirstOrDefault();

                        if (stud != null)

                        {

                            stud.Name = student.Name;

                            stud.Age = student.Age;

                            stud.State = student.State;

                            stud.Country = student.Country;

                            db.SaveChanges();

                        }

                        return RedirectToAction("Index");

                    }

                    catch { }

                }

            }

 

            if (Request.IsAjaxRequest())

            {

                return PartialView("_StudentData", student);

            }

            else

            {

                return View("StudentData", student);

            }

        }

To delete the record of students adds the DeleteRecord action in the HomeController. This will delete the record of a student from the database on the basis of id.

public ActionResult DeleteRecord(int id)

        {

            Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();

            if (student != null)

            {

                try

                {

                    db.Students.Remove(student);

                    db.SaveChanges();

                }

                catch { }

            }

            return RedirectToAction("Index");

        }

To view the details of the student, add the Details action in your HomeController. This will display the details of a student on the basis of id.

public ActionResult Details(int id)

        {

            Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();

            if (student != null)

            {

                if (Request.IsAjaxRequest())

                {

                    return PartialView("_StudentDetails", student);

                }

                else

                {

                    return View("StudentDetails", student); 
                } 
            } 
            return View("Index"); 
        }

Now both coding and design part is over. To test an application, run or debug your application:

I have added a few records during coding. You can add student records by using Create New option.

To edit records, just press the edit link given for each student in a row.

If the JavaScript is turned off, you cannot use a modal dialog to add and edit the records of students, then, in that case, you can use the StudentData view to add and edit the records.

To delete the record of the student, use the Delete link.

Thanks for reading this article. You can enter your valuable comments and suggestion to improve this article in the comment box.

Leave Comment

17 Comments

View All Comments

Dr Kashyap

01-Apr-2017

send me the code plz kajay3320@gmail.com

Sree Lakshmi S

28-Mar-2017

hi,

I had followed all your instructions and still it is not producing any modal popups. It is getting navigated to the next page instead of opening a dialog box. Can you please tell me why this is so?

Dan Randolph

11-Apr-2016

Chris, I really liked doing this project from scratch and learned a lot. I started with the ASP.NET MVC4 "empty" template and did everything you said except I had to adjust a few things for Visual Studio 2012. I used Server Explorer to create the connection string and once I clicked OK, it created the StudentDb database for me. This is the first time I used a code-first Model without using the EF wizard to build the code (database-first). This is a much better way of doing database classes. In the jQuery event handlers, I changed all of the ".live('click'," to just ".click(" since the .live method has been removed from newer versions of jQuery. The "StudentData.cshtml" file should be a full View, not a PartialView as shown. This looks like a copy-paste error. The same thing is true in a couple of places where you return PartialView("StudentData") instead of View("StudentData").

My DbContext class ended up looking like this so that I can pass in the connection string to the constructor:

  public class StudentContext: DbContext   {     public StudentContext (string ConnectionString) : base (ConnectionString) {}     public DbSet<Student> Students { get; set; }   }

meraj hasan

25-Dec-2015

After add ,update and delete i don't want post back.i just want to update my list without postback.

kiran jawandha

11-Dec-2015

Sir can you please help me. It was working for me profectly. but now somehow something is wrong .When m clicking on Save button its not Saving data to database. Its going back to View. Can you tell me what's the issue

Ali Kolahdoozan

16-Oct-2015

Thanks.Any Source code related ?

Akwin Lopez

22-Jul-2015

Plz help me how to download this project

Shreeji Patel

14-Mar-2015

Respected Sir,

please Help me Related I want to put date picker on model dialog box.

thanks...

John Smith

10-Jan-2015

Lenny check this link:

http://getbootstrap.com/javascript/

Lenny Arias

09-Jan-2015

Hi Chris, thank's you for the example. It's work fine for me, but the modal popup's isn't working.

I try the example with Visual Studio 2013 and Mvc4.

Also, i update the jquery version:

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.11.2.min.js")" type="text/javascript"></script>

So i get it:

But i can't use the modal popup.

Please, send me the code or could check my code?

Ty.

Madhu Mangalagiri

30-Nov-2014

Nice Job...

greg DORIAN

18-Oct-2014

thx rohit!!

Chris Anderson

you should include the following in every partial view which is rendered in modal:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button><h4class="modal-title">Modal title</h4></div><divclass="modal-body"><!-- place your controls here --></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->

17-Oct-2014

Hi rohit.

I've was trying to implement using bootstrap and MVC5 ef6, with modals (http://getbootstrap.com/javascript/#modals) but I don´t know where I have to put the code for the modal, I put it in Index view page, or I have to put in every view included de partial views?? if you have an example it will be wonderful!!

Ankita Dengare

02-Oct-2014

Can You please attach the source code please.... Thank You

Teja Gudivada

18-Sep-2014

Can u send the source code to tejaswikumar286@gmail.com please

Thank you

What is the use of Request.IsAjaxRequest() in the code it is always returning false

articles

CRUD Operation Using Modal Dialog in ASP.NET MVC